<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery隐藏收缩在线客服</title>

        <style type="text/css">
            *{margin:0;padding:0;list-style-type:none;}
            a,img{border:0;}
            body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}


            /*在线客服代码*/
            .rides-cs{background:#333;position:fixed;top:130px;right:1px;z-index:999;}
            *html .rides-cs{position:absolute;top:expression(eval(document.documentElement.scrollTop));margin:130px 0 0 0;}
            .rides-cs a{color:#00A0E9;}
            .rides-cs a:hover{color:#ff8100;text-decoration:none;}
            .rides-cs .floatL{width:36px;float:left;position:relative;z-index:1;}
            .rides-cs .floatL a{font-size:0;text-indent:-999em;display:block;}
            .rides-cs .floatR{width:130px;float:left;padding:5px;overflow:hidden;}
            .rides-cs .floatR .cn{background:#F7F7F7;}
            .rides-cs .cn h3{font-size:14px;color:#333;font-weight:600;line-height:24px;padding:5px}
            .rides-cs .cn ul{padding:0 0 0 8px;}
            .rides-cs .cn ul li{line-height:38px;height:38px;border-bottom:solid 1px #E6E4E4;overflow:hidden;}
            .rides-cs .cn ul li span{color:#777;}
            .rides-cs .cn ul li img{vertical-align:middle;}
            .rides-cs .btnOpen,.rides-cs .btnCtn{position:relative;z-index:9;top:0;left:0;background:url(__PUBLIC__/images/shopnc.png) no-repeat;display:block;width:20px;height:146px;overflow:hidden;padding:8px;}
            .rides-cs .btnOpen{background-position:8px 12px;}
            .rides-cs .btnCtn{background-position:-31px 12px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
	
                $("#aFloatTools_Show").click(function(){
                    $('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){
                        $('#divFloatToolsView').show();
                    });
                    $('#aFloatTools_Show').attr('style','display:none');
                    $('#aFloatTools_Hide').attr('style','display:block');
                });
	
                $("#aFloatTools_Hide").click(function(){
                    $('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){
                        $('#divFloatToolsView').hide();
                    });
                    $('#aFloatTools_Show').attr('style','display:block');
                    $('#aFloatTools_Hide').attr('style','display:none');
                });
	
            });
        </script>


    </head>

    <body>


        <div class="rides-cs">

            <div class="floatL">
                <a style="display:block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" href="javascript:void(0);">展开</a>
                <a style="display:none" id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" href="javascript:void(0);">收缩</a>
            </div>

            <div id="divFloatToolsView" class="floatR" style="display:none">
                <div class="cn">
                    <foreach name="servicesArr" item="row">
                        <h3 class="titZx">{$row.name}</h3>
                        <ul>
                            <foreach name="row['sub']" item="row2">
                                <li>
                                    <span>{$row2.name}</span>
                                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin={$row2.num}&site=qq&menu=yes">
                                        <img border="0" src="http://wpa.qq.com/pa?p=2:{$row2.num}:51" alt="{$row2.name}" title="{$row2.name}" />
                                    </a>
                                </li>
                            </foreach>
                        </ul>
                    </foreach>
                </div>
            </div>

        </div>


    </body>
</html>